<template>
    <div>
        <!-- 图文列表区域 -->
        <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item._id">
					<router-link :to="'/home/newsinfo/'+item.id">
						<img class="mui-media-object mui-pull-left" :src="item.icon">
						<div class="mui-media-body">
							<h1>{{item.title}}</h1>
							<p class='mui-ellipsis'>
                                <span>发表时间:{{item.created_at|dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                                <span>点击：1次</span>
                            </p>
						</div>
					</router-link >
				</li>
			</ul>
    </div>
</template>
<script>
import {Toast} from 'mint-ui'
    export default{
        data(){
            return {
                newslist:[],//保存所有新闻列表的数组
            }
        },
        created(){
            this.getNewsList();
        },
        methods:{
            //获取新闻列表
            getNewsList(){
                this.$http.get('api/xiandu/category/wow').then(result => {
                    // console.log(result.body);
                    if(result.body.error === false){
                        //挂载数据
                        this.newslist = result.body.results;
                        // console.log(this.newslist);
                    }else{
                        //提示失败了
                        //注意：这里的Toast 是一个 JS 组件，只能通过 JS 调用，并不是把它当作标签引入页面中去的，所以 ，如果想要在组件中 调用 Toast ，则，必须中自己的组件中，按需导入，否则，在子组件中，是访问不到 Toast 这个JS对象的；
                        Toast('获取列表失败！')
                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .mui-media-body{
        h1{
            font-size:14px;
        }
        .mui-ellipsis{
            color:#26A2FF;
            font-size:12px;
            display:flex;
            justify-content: space-between;
        }
    }
</style>

